<template>
  <div class="m-enumEdit">
    <el-dialog
      :title="`${title}枚举`"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="beforeClose"
      v-dialogDrag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        :rules="rules"
        :hide-required-asterisk="title=='查看'"
      >
        <el-form-item label="枚举编码" placeholder="请输入编码,编码不能重复" prop="enumCode">
          <el-input
            v-model="ruleForm.enumCode"
            placeholder="请输入编码"
            clearable
            maxlength="20"
            :disabled="title!='新增'"
          ></el-input>
        </el-form-item>
        <el-form-item label="枚举名称" placeholder="请输入名称" prop="enumName">
          <el-input
            v-model="ruleForm.enumName"
            placeholder="请输入名称"
            clearable
            maxlength="12"
            :disabled="title=='查看'"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级枚举" prop="parentCode">
          <el-cascader
            v-model="ruleForm.parentCode"
            :options="parentOption"
            :props="cascaderProps"
            :show-all-levels="true"
            clearable
            :disabled="title=='查看'"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="是否叶节点" prop="isLeaf">
          <el-radio-group v-model="ruleForm.isLeaf" v-if="title!=='查看'">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
          <el-input v-model="ruleForm.isLeaf" v-else disabled></el-input>
        </el-form-item>
        <el-form-item label="排序码" prop="sort">
          <el-input
            v-model="ruleForm.sort"
            placeholder="请输入排序码"
            maxlength="10"
            :disabled="title=='查看'"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="sortCode">
          <el-input
            v-model="ruleForm.remark"
            placeholder="请输入备注"
            type="textarea"
            maxlength="100"
            :disabled="title=='查看'"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()" v-if="title!=='查看'">取消</el-button>
        <el-button
          type="primary"
          @click="saveData('save')"
          :disabled.sync="disState"
          v-if="title!=='查看'"
        >保存</el-button>
        <el-button
          type="primary"
          @click="saveData('continue')"
          :disabled.sync="disState"
          v-if="title=='新增'"
        >保存并继续</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Msg from "@/public/message"
export default {
  data () {
      let vaildSortCode = (rule, value, callback)=>{
          let reg = /^[0-9]*$/
          if(value){
              if(!reg.test(value)){
                  callback(new Error("排序码需为数字且不超过10位！"));
              } else{
                  callback()
              }
          } else {
              callback()
          }
      }
      let vaildEnumCode = (rule, value, callback)=>{
          if(value.trim()){
               let regCn = new RegExp("[\\u4E00-\\u9FFF]+", "g");
              if(regCn.test(value)){
                  callback(new Error("请勿输入汉字！"));
              } else {
                  callback()
              }
          } else {
                callback(new Error("编码不能为空！"))
          }
      }
    return {
      //  表单校验
      rules: {
        enumCode: [
          { required: true, validator:vaildEnumCode, trigger: 'blur' }
        ],
        enumName: [
          { required: true, message: "请输入枚举名称", trigger: 'blur' }
        ],
        parentCode: [
          { required: false, message: "请选择上级编码", trigger: 'blur' }
        ],
        sort: [
          { required: false, validator:vaildSortCode, trigger: 'blur' }
        ]
      },
      sortOption: [],
      disState: false,
      //  级联选择器配置
      cascaderProps: {
        checkStrictly: true,
        value: 'enumCode',
        label: 'enumName',
        children: 'childs'
      }
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    ruleForm: {
      type: Object
    },
    title: {
      type: String
    },
    parentOption: {
      type: Array
    }
  },
  methods: {
    beforeClose () {
      this.$emit('beforeClose')
    },
    //  弹窗关闭回调
    handleClose (type) {
      this.$emit('closeDialog', type)
    },
    // 保存数据
    saveData (type) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const { parentCode } = this.ruleForm
          let params = {
            ...this.ruleForm,
            parentCode: Array.isArray(parentCode) ? parentCode[parentCode.length - 1] : parentCode
          }
          if (this.title == '新增') {
            params.creator = this.$global.user.employeeName
            params.creatorId = this.$global.user.id
          } else {
            params.modifyer = this.$global.user.employeeName
            params.modifyerId = this.$global.user.id
          }
          this.disState = true
          this.$http.saveEnum(params).then(({ data }) => {
            this.disState = false
            if (data.code == 1) {
              Msg.showSuccessMsg('保存成功')
              if (type == 'save') {
                let text = this.title == '新增' ? 'add' : 'edit'
                this.handleClose(text)
              } else {
                this.handleClose('continue')
              }
            } else {
              Msg.showErrorMsg(data.info)
            }
          }).catch((err) => {
            this.disState = false
            Msg.showErrorMsg(err.data.message)
          })
        }
      })
    }
  },
  computed: {
    toolTip () {
      if (this.ruleForm.isLeaf == 1) {
        return '是'
      } else {
        return '否'
      }
    }
  },
  components: {},
  beforeMount () {

  }
}
</script>